<template lang="">
  <div
    id="danweiInfo"
    class="danweiInfo absolute black-bg color-white inset-shadow"
    style="opacity: 0;border-radius:10px"
    :style="{
      borderRadius: `${10 * scaleNum}px`,
      fontSize: `${18 * scaleNum}px`
    }"
  >
    <div class="flex justify-between text-right pd10 primary-bg">
      <span
        ><b v-show="!isActive && isCompanyList.length > 1"
          >共{{ isCompanyList.length }}个服务地点</b
        ></span
      >
      <i
        class="el-icon-circle-close color-white pointer size20"
        :style="{ fontSize: `${20 * scaleNum}px` }"
        @click="hiddenTag"
      ></i>
    </div>
    <div
      class="pdlr8 pdtb8  pdb15"
      v-if="isActive || isCompanyList.length == 1"
    >
      <div class="" :style="{ lineHeight: `${30 * scaleNum}px` }">
        名称：{{ danweiData.name }}
      </div>
      <div class="" :style="{ lineHeight: `${30 * scaleNum}px` }">
        地址：{{ danweiData.address }}
      </div>
      <div class="justify-between flex text-center border-top-active">
        <div class="pd8 ">
          <div
            class="color-primary1 size20 "
            :style="{ fontSize: `${20 * scaleNum}px` }"
          >
            {{ danweiInfo.gcsTotall }}
          </div>
          工程师人数
        </div>
        <div class="pd8">
          <div
            class="color-primary1 size20"
            :style="{ fontSize: `${20 * scaleNum}px` }"
          >
            {{ danweiInfo.shebeiTotal }}
          </div>
          设备数量
        </div>
        <div class="pd8">
          <div
            class="color-primary1 size20"
            :style="{ fontSize: `${20 * scaleNum}px` }"
          >
            {{ danweiInfo.gongdanTotal }}
          </div>
          工单数量
        </div>
      </div>
    </div>
    <div class="pdlr8 pdtb8  pdb15" v-else>
      <div
        class="lh30 hover-active pointer mrb8"
        :style="{
          lineHeight: `${30 * scaleNum}px`,
          fontSize: `${18 * scaleNum}px`
        }"
        v-for="item in isCompanyList"
        @click="getNowCompany(item)"
      >
        <el-popover
          placement="right"
          :width="400 * scaleNum"
          trigger="click"
          popper-class="black-bg color-white family-syht "
        >
          <div
            class="pdlr8 pdtb8  pdb15"
            :style="{
              fontSize: `${18 * scaleNum}px`
            }"
          >
            <div class="">名称：{{ danweiData.name }}</div>
            <div class="">地址：{{ danweiData.address }}</div>
            <div class="justify-between flex text-center border-top-active">
              <div class="pd8 ">
                <div
                  class="color-primary1 size20 "
                  :style="{ fontSize: `${20 * scaleNum}px` }"
                >
                  {{ danweiInfo.gcsTotall }}
                </div>
                工程师人数
              </div>
              <div class="pd8">
                <div
                  class="color-primary1 size20"
                  :style="{ fontSize: `${20 * scaleNum}px` }"
                >
                  {{ danweiInfo.shebeiTotal }}
                </div>
                设备数量
              </div>
              <div class="pd8">
                <div
                  class="color-primary1 size20"
                  :style="{ fontSize: `${20 * scaleNum}px` }"
                >
                  {{ danweiInfo.gongdanTotal }}
                </div>
                工单数量
              </div>
            </div>
          </div>
          <div slot="reference">{{ item.name }}</div>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script>
import { suizhiguanGongdanshebeigongchengshiTotalbyCompanyId as searchApi } from "@/api";
export default {
  data() {
    return {
      danweiInfo: {
        gongdanTotal: 0,
        shebeiTotal: 0,
        gcsTotall: 0
      }
    };
  },
  computed: {
    isCompanyList() {
      if (!this.companyAll?.length) [];
      return this.companyAll.filter(e => {
        return this.danweiData?.lat == e.lat && this.danweiData?.lng == e.lng;
      });
    }
  },
  props: {
    scaleNum: {
      type: Number,
      default: 1
    },
    danweiData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isActive: {
      type: Boolean,
      default: false
    },
    companyAll: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    hiddenTag() {
      let danwei = document.getElementById("danweiInfo");
      danwei.style.opacity = 0;
    },
    getNowCompany(item) {
      this.danweiData = item;
      this.$nextTick(() => {
        this.getInfoCompany();
      });
    },
    async getInfoCompany() {
      this.danweiInfo = {
        gongdanTotal: 0,
        shebeiTotal: 0,
        gcsTotall: 0
      };
      if (!this.danweiData?.companyId) return;
      let { data } = await searchApi({ companyId: this.danweiData?.companyId });
      this.danweiInfo = data;
    }
  }
};
</script>
<style lang="scss">
.danweiInfo {
  max-width: 45vh;
}
</style>
